import { useRef, useEffect } from 'react'
import * as echarts from 'echarts'
import Bar from '@/components/Bar'

function Home() {
  // const domRef = useRef()
  // const charInit = () => {
  //   // 基于准备好的dom，初始化echarts实例
  //   var myChart = echarts.init(domRef.current)

  //   // 指定图表的配置项和数据
  //   var option = {
  //     title: {
  //       text: 'ECharts 入门示例',
  //     },
  //     tooltip: {},
  //     legend: {
  //       data: ['销量'],
  //     },
  //     xAxis: {
  //       data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
  //     },
  //     yAxis: {},
  //     series: [
  //       {
  //         name: '销量',
  //         type: 'bar',
  //         data: [5, 20, 36, 10, 10, 20],
  //       },
  //     ],
  //   }

  //   // 使用刚指定的配置项和数据显示图表。
  //   myChart.setOption(option)
  // }

  // useEffect(() => {
  //   charInit()
  // }, [])
  return (
    <div>
      <Bar
        title='主流框架'
        xData={['react', 'vue', 'angular', 'svelte']}
        yData={[30, 40, 10, 20]}
        style={{ width: '600px', height: '400px' }}
      />
    </div>
  )
}

export default Home
